<script>
  import { onMount } from 'svelte';
  import Typewriter from 'typewriter-effect/dist/core';

  export let strings = [];
  export let speed = 50;
  export let deleteSpeed = 30;
  export let delay = 1500;
  export let loop = true;
  export let cursor = '|';
  export let autoStart = true;

  let element;
  let typewriter;

  // 响应 strings 变化
  $: if (typewriter && strings.length > 0) {
    typewriter.stop();
    initTypewriter();
  }

  function initTypewriter() {
    if (element && strings.length > 0) {
      element.innerHTML = '';
      typewriter = new Typewriter(element, {
        strings: strings,
        typeSpeed: speed,
        deleteSpeed: deleteSpeed,
        delaySpeed: delay,
        loop: loop,
        cursor: cursor,
        autoStart: autoStart,
      });
    }
  }

  onMount(() => {
    initTypewriter();

    return () => {
      if (typewriter) {
        typewriter.stop();
      }
    };
  });
</script>

<div bind:this={element} class="typewriter-container"></div>

<style>
  .typewriter-container {
    font-family: 'Courier New', monospace;
    font-size: 1.2rem;
    line-height: 1.6;
    min-height: 1.5em;
  }

  :global(.Typewriter__wrapper) {
    color: inherit;
  }

  :global(.Typewriter__cursor) {
    color: #3b82f6;
    font-weight: bold;
  }
</style>
